<div class="ama-due-date-block">
    <form [formGroup]="dueDateForm">
        <div class="adf-property-label">{{'PROCESS_EDITOR.ELEMENT_PROPERTIES.DUE_DATE' | translate}}</div>
        <mat-checkbox formControlName="useProcessVariable">
            {{'PROCESS_EDITOR.ELEMENT_PROPERTIES.USE_PROCESS_VARIABLE' | translate}}
        </mat-checkbox>
        <div *ngIf="useProcessVariable.value"
             class="date-time-variable">
            <mat-form-field>
                <mat-select formControlName="processVariable">
                    <mat-option></mat-option>
                    <mat-option *ngFor="let processVariable of processVariables"
                                [value]="processVariable.name">
                        {{processVariable.name}}
                    </mat-option>
                </mat-select>
            </mat-form-field>
        </div>

        <div *ngIf="!useProcessVariable.value"
             class="ama-due-date-input">
            <adf-card-view [properties]="properties"
                           [editable]="true"
                           [displayClearAction]="true">
            </adf-card-view>
        </div>

    </form>
</div>
